<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="../three.js/build/three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene(); // 场景
		
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); // 透视相机
		
        var renderer = new THREE.WebGLRenderer(); // 渲染器
		
        renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
		
        document.body.appendChild(renderer.domElement);// 把渲染元素放到body里面 

        var geometry = new THREE.CubeGeometry(1,1,1); // 新建一个方块状几何物体
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 新建一种材质，颜色为00ff00
        var cube = new THREE.Mesh(geometry, material); //把方块几何物体和材质混合(Mesh)生成最终图形
        scene.add(cube); //放进场景中 
        camera.position.z = 5; //
        function render() {
            requestAnimationFrame(render); 
            cube.rotation.x += 0.1; //
            cube.rotation.y += 0.1; //
            renderer.render(scene, camera); //
        }
        render(); //


        /*
//其中一个重要的函数是requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数，这样通过上面render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让rander()再执行一次，就形成了我们通常所说的游戏循环了。
        */

    </script>
</body>
</html>
